Fixes #18114
Closes #18115

This PR changes JS config handling such that we always preserve casing for theme keys (when possible).

Now there are two exceptions to this rule:

1. Top-level keys in the theme do get converted to kebab-case. As CSS variables are not generated from these this shouldn't be a big issue.

All of our internal plugins look for kebab-case keys. So, for example, take the path backgroundColor.red.500. This must translate to --background-color-red-500. But if you had something like backgroundColor.lightBlue it would be perfectly fine for that to translate to --background-color-lightBlue internally (and thus the utility be written as bg-lightBlue.

2. Tuple object keys are converted to kebab-case as well.

These keys are converted to "nested" key syntax internally and typtically represent CSS property names.

For example:

export default {
  theme: {
    fontSize: {
      xs: ["1.5rem", { lineHeight: "1.3" }]
    },
    
    fontFamily: {
      sans: ["Potato Mono", { fontVariationSettings: '"XHGT" 0.7' }]
    }
  }
}

The lineHeight key here must be converted to line-height because it represents a CSS property name. The theme key that represents this value is --text-xs--line-height. The same situation applies for the fontVariationSettings where the theme key is --font-sans--font-variation-settings.